<template>
	<section class="search_first_page">
		<div class="hot_search">
			<h4 class="h4_title">热门搜索</h4>
			<div class="hots_search_wrap" data-mu-loading-color="secondary" v-loading="loadflag.hots">
				<mu-chip class="chip" text-color="#000" v-for="h,k in hotList" @click="handlerChip( h.first)">
					{{ h.first }}
				</mu-chip>
			</div>

		</div>
		<div class="history_search" v-show="_get_search_history.length > 0">
			<div class="flex align_center space_between">
				<h4 class="h4_title">搜索历史</h4>

				<mu-button icon color="#cacaca" @click="clearHistory">
					<mu-icon value="delete"></mu-icon>
				</mu-button>

			</div>
			<mu-chip class="chip" text-color="#000" v-for="h,k in _get_search_history" @click="handlerChip(h)">
				{{ h }}
			</mu-chip>
		</div>
	</section>
</template>
<script>
	import {mapGetters} from 'vuex';
	export default{
		name: "search_hot",
		props:{
			focusFlag:{
				type: Boolean,
				default: false,
			}
		},
		data(){
			return{
				hotList: [],
				loadflag:{
					hots: false,
				}
			}
		},
		mounted(){
			this.$nextTick(()=>{
				// this._getSearchHot();
			})
		},
		watch:{
			focusFlag:{
				handler(val,old){
					if(val && this.hotList.length == 0){
						this._getSearchHot();
					}
				},
				deep: true
			}
		},
		computed:{
			...mapGetters([
			 	//此处的 play_mode 与以下 store.js 文件中 getters 内的 play_mode 相对应
			 	'_get_search_history',
			]),
		},
		methods:{
			_getSearchHot(){
				this.loadflag.hots = true;
				this.$api.get(this.ApiPath.search.hot,{},success=>{
					this.hotList = success.data.result.hots;
					this.loadflag.hots = false;
				})
			},
			handlerChip(value){
				this.$parent.searchText = value;
				// this.$nextTick(()=>{
				this.$emit('handlerSearch');
				// })
				// console.log(this)
			},
			clearHistory(){
				this.$store.commit('_clear_search_history');
			}
		}
	}
</script>
<style lang="scss" scoped>
	.search_first_page{
		text-align: left;
		/*padding: 5px 10px;*/
	}
	.hot_search,.history_search{
	}
	.h4_title{
		margin: 5px 0;
		font-weight: 700;
	}
	.chip{
		margin: 5px 12px 5px 0;
		font-size: 14px;
	}
	.hots_search_wrap{
		position: relative;
		min-height: 120px;
	}
</style>